<%@ page language="java"  isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.2.1.1.js"></script>
        <script src="js/ajax.js"></script>
		<style>
			.green{
				background-color: rgb(89, 254, 201);
			}
			
			.scott{
				width: 400px;
				height: 30px;
				border: 1px solid orange;
				border-radius: 5px;
				margin-left: 20px;
				padding-left: 10px;
				
			}
			
			table td{
				border: 1px solid green;
				margin: 10px auto;
				height: 50px;
			}
			
			table{
				width: 540px;
				margin: 10px auto;
			}
			
			.btn{
				
				width: 100px;
				height: 35px;
				margin: 10px 80px;
				text-align: center;
				border-radius: 5px;
			}
					
					
		</style>

	</head>
	<body>
		
		<table  cellpadding="0" cellspacing="0">
			
			<tr class="green">
				<td colspan="2" align="center" style="font-size: 30px;">
					学员信息
				</td>
			</tr>
			
			<tr>
				<td class="green">姓名：</td>
				<td>
					<input class="scott"  id="sname" />
				</td>
			</tr>
			
			<tr>
				<td class="green">年龄：</td>
				<td>
					<input class="scott"  id="sage" />
				</td>
			</tr>
			
			
			<tr>
				<td class="green">性别：</td>
				<td>
					<input class="scott"  id="sgender" />
				</td>
			</tr>
			
			<tr>
				<td class="green">家庭住址：</td>
				<td>
					<input class="scott"  id="saddress" />
				</td>
			</tr>
			
			<tr>
				<td class="green">Email：</td>
				<td>
					<input class="scott"  id="semail" />
				</td>
			</tr>
			<tr>
				
				<td colspan="2">
					<input class="btn" type="button" value="修改" onclick="update()" />
					<input class="btn" type="button" value="重置" onclick="reset2()" />
				</td>
				
			</tr>
		</table>
		
	</body>
	
	<script>
	
		function checkStudent(){
			var sname = $('#sname').val();
			var sgender = $('#sgender').val();
			var sage = $('#sage').val();
			
			var snameLength=sname.length;
			var sgenderLength=sgender.length;
			var sageLength=sage.length;
			
			if(snameLength ==0  || sgenderLength ==0 ||  sageLength ==0 ){
				return false;
				
			}
			return true;
		}
	
		function update(){
			
			var rs = checkStudent();
			if(rs){
				//发送ajax请求
				var url=getRoot()+"update";
				console.log(url);
				var method='POST';
				
				var sid = ${param.sid};
				var sname = $('#sname').val();
				var sgender = $('#sgender').val();
				var sage = $('#sage').val();
				var saddress = $('#saddress').val();
				var semail = $('#semail').val();
				
				var data={
					sid:sid,
					sname:sname,
					sgender:sgender,
					sage:sage,
					saddress:saddress,
					semail:semail
					
				};
				var callback=function(backData){
					//TODO
					console.log(backData);
					
					var code = backData.code;
					if(code === '200'){
						
						// 跳到列表页面
						window.location.href=getRoot()+"student-list.html?flag=upatesuccess"
						
						
					}
				};
				// 2.2、这里才是真的发送ajax请求
				send(url,method,data,callback);
			}else{
				
				//弹框提示用户 请填写完整的学员信息在修改
				alert('请填写完整的学员信息在修改');
			}
			
			
		}
		
		function reset2(){
			$('#sname').val('');
			$('#sage').val('');
			$('#sgender').val('');
			$('#saddress').val('');
			$('#semail').val('');
		}
		$(function(){
			
			var url=getRoot()+"find/one?sid="+${param.sid};
			console.log(url);
			var method='GET';
			var data='';
			var callback=function(backData){
				//TODO
				console.log(backData);
				
				var code = backData.code;
				if(code === '200'){
					
					var entity = backData.data;
					
					$('#sname').val(entity.sname);
					$('#sage').val(entity.sage);
					$('#sgender').val(entity.sgender);
					$('#saddress').val(entity.saddress);
					$('#semail').val(entity.semail);
					
					
				}
			};
			// 2.2、这里才是真的发送ajax请求
			send(url,method,'',callback);
			
		});
	
	</script>
</html>